import React from "react";
import { Layout, Menu, ConfigProvider } from "antd";
const { Sider } = Layout;
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import {
  TeamOutlined,
  SettingOutlined,
  UserDeleteOutlined,
  FundProjectionScreenOutlined,
  BookOutlined,
  AppstoreOutlined,
  UserOutlined,
  SendOutlined,
  CarryOutOutlined,
  FileTextOutlined,
} from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { setBreadcrumbItems } from "../slices/breadcrumbSlice";

const AntSider = () => {
  const navigate = useNavigate(); // 使用useNavigate钩子
  const dispatch = useDispatch();
  const theme = {
    token: {
      colorPrimaryBg: "#2758b4",
      colorText: "#cecdcc", // 设置字体颜色
      colorPrimary: "#fff",
      colorIcon: "#fff",
    },
  };
  const childrenRoutesAll = useSelector((state) => state.route.childrenRoutes);

  const iconMap = {
    首页: AppstoreOutlined,
    医院综合: SettingOutlined,
    患者大数据: BookOutlined,
    动态个人: SendOutlined,
    中西医药房: CarryOutOutlined,
    医疗前线: FileTextOutlined,
    医疗药品出入库: FundProjectionScreenOutlined,
    分级医生: UserDeleteOutlined,
    分级护士: UserOutlined,
    病床管理: SettingOutlined,
    全账号管理: TeamOutlined,
  };

  const items = Object.keys(iconMap).map((type, index) => {
    const key = `sub${index + 1}`;
    const icon = iconMap[type];
    const children = childrenRoutesAll
      .filter(
        (route) =>
          route.meta && route.meta.type === type && route.meta.typeChildren
      )
      .map((route, j) => ({
        key: `${key}-${j + 1}`,
        label: route.meta.typeChildren,
        onClick: () => {
          dispatch(
            setBreadcrumbItems([
              { title: type, typeChildren: route.meta.typeChildren },
            ])
          );
          console.log(`点击了 ${type} 的子项: ${route.meta.typeChildren}`);
          console.log(`路径: ${route.path}`);
          navigate(route.path); // 导航到对应的路径
        },
      }));

    const menuItem = {
      key,
      icon: React.createElement(icon),
      label: type,
      ...(children.length > 0 ? { children } : {}),
      ...(type === "首页"
        ? {
            onClick: () => {
              dispatch(setBreadcrumbItems([{ title: "首页" }]));
              console.log(`点击了首页`);
              navigate(`/dashboard/home`); // 导航到首页
            },
          }
        : {}),
    };

    return menuItem;
  });

  return (
    <ConfigProvider theme={theme}>
      <Sider width={170} style={{}}>
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          style={{
            overflow: "scroll", // 或者 "auto"，但是不会显示滚动条
            height: "100%",
            borderRight: 0,
            background: "#4073c9",
            scrollbarWidth: "none", // 对于 Firefox
            WebkitScrollbar: "none", // 对于 Webkit 浏览器（如 Chrome, Safari）
          }}
          items={items}
        />
      </Sider>
    </ConfigProvider>
  );
};

export default AntSider;
